@import "./vars.scss";

.blogl-container {
  .blogl_h2 {
    margin-top: 108px;
    margin-bottom: 52px;
    color: $color9;
    text-align: center;

    img {
      width: 30px;
      display: none;
      transform: rotate(90deg);
    }
  }

  .blogl-figure-wrapper {
    @include display(flex);
    margin-top: 86px;
    .bloglf-pic {
      overflow: hidden;
    }
    .bloglf-info {
      @include display(flex);
      margin-top: 37px;
      @include align-items(center);
      color: #000;
      .bloglf-btn {
        margin-right: 30px;
      }
    }
    .bloglf-title {
      margin-top: 42px;
      font-size: 26px;
      color: #000;
    }
    .bloglf-subtitle {
      color: $color19;
      margin-top: 16px;
    }
    .bloglf-left {
      display: block;
      width: px2per2(820, 1600);
      @include flex-basis(px2per2(820, 1600));
      padding-left: 30px;
    }
    .bloglf-right {
      display: block;
      padding-left: px2per2(106, 1600);
      padding-right: px2per2(118, 1600);
      width: px2per2(780, 1600);
      @include flex-basis(px2per2(780, 1600));
    }
  }

  .blogl-articles {
    margin-top: 95px;
    .blogl-label {
      margin-bottom: 34px;
    }
    .blogl-list {
      @include display(flex);
      @include flex-wrap(wrap);
      .blogl-item {
        padding: 0 30px 73px;
      }
    }
  }
  .blogl-paging {
    margin-top: 40px;
    margin-bottom: 100px;
  }
}

.blog-container {
  .blog-container-header {
    padding-bottom: 65px;
    border-bottom: 1px solid $border2;
    .blog_h2 {
      margin-top: 168px;
      margin-bottom: 99px;
    }
    .blog-info {
      @include display(flex);
      @include align-items(center);
      margin-bottom: 40px;
      .bli-btn {
        margin-right: 30px;
      }
    }
    .blog-h3 {
      font-size: 26px;
      line-height: 1.2;
      font-weight: 500;
      color: #000;
    }
  }
  .blog-content {
    border-bottom: 1px solid $border2;
    padding-top: 50px;
    img {
      max-width: 100%;
    }
  }
  .blog-footer {
    margin-top: 70px;
    margin-bottom: 120px;
    text-align: center;
    .blf-btn {
      padding: 25px 60px;
      font-size: 15px;
      @include display(inline-flex);
      @include align-items(center);
      background-color: transparent;
      .blfreturn {
        margin-right: 15px;
        font-size: 20px;
      }
    }
  }
}
@media screen and (max-width: 768px) {
  .blog-container {
    padding: 0 15px;
  }
  .blog-container .blog-container-header {
    padding-bottom: 30px;
  }
  .blog-container .blog-container-header .blog_h2 {
    margin: 100px 0 20px;
  }
  .blog-container .blog-container-header .blog-info {
    margin-bottom: 20px;
  }
  .blog-container .blog-content {
    padding-top: 0;
  }
  .blog-container .blog-footer {
    margin: 30px 0;
  }
  .blog-container .blog-footer .blf-btn {
    padding: 10px 25px;
    width: unset;
    font-size: 14px;
    height: unset;
  }
  .blogl-container {
    padding: 0 15px;
  }
  .blogl-linkgroup .blogl-link {
    padding: 10px 15px;
    display: block;
    text-align: left;
  }
  .blogl-linkgroup {
    margin: 0 -15px;
    font-size: 14px;
    @include display(flex);
    @include flex-wrap(wrap);
    &::after {
      content: "";
      height: 1px;
      width: 100%;
      margin: 15px 15px 0 15px;
      background-color: #eee;
    }
  }
  .blogl-container .blogl_h2 {
    margin: 100px 0 10px;
    text-align: left;
    @include display(flex);
    @include justify-content(space-between);
  }
  .blogl-container .blogl_h2 img {
    display: block;
  }
  .blogl-container .blogl-figure-wrapper {
    margin-top: 20px;
    @include flex-direction(column);
  }
  .blogl-container .blogl-figure-wrapper .bloglf-left {
    width: 100%;
    @include flex-basis(unset);
    padding-left: 0;
  }
  .blogl-container .blogl-figure-wrapper .bloglf-info {
    margin-top: 15px;
  }
  .blogl-container .blogl-figure-wrapper .bloglf-title {
    margin-top: 15px;
    overflow: unset;
    text-overflow: unset;
    white-space: pre-wrap;
  }
  .blogl-container .blogl-figure-wrapper .bloglf-subtitle {
    margin-top: 15px;
    overflow: unset;
    text-overflow: unset;
    white-space: pre-wrap;
    font-size: 14px;
    line-height: 1.5;
  }
  .blogl-container .blogl-figure-wrapper .bloglf-right {
    margin-top: 15px;
    padding: 0;
    width: 100%;
    @include flex-basis(unset);
  }
  .blogl-container .blogl-articles {
    margin-top: 50px;
  }
  .blogl-container .blogl-articles .blogl-label {
    margin-bottom: 0;
  }
  .blogl-container .blogl-articles .blogl-list .blogl-item {
    margin-top: 15px;
    padding: 0;
  }
  .blogl-container .blogl-paging {
    margin: 30px 0;
  }
}
